<template>
  <el-drawer
    v-model="dialogVisible"
    title='审核'
    width="600px"
    @close="reset"
  >
    <el-form 
      ref="articleFormRef"
      :model="tableItem" 
      :rules="rules"
      label-width="180"
      label-position="top"
      :disabled="!isDisabled"
    >
      <el-form-item label="审核结果" prop="status">
        <el-radio-group v-model="tableItem.status">
          <!-- <el-radio :value="1">申请中</el-radio> -->
          <el-radio :value="2">申请完成</el-radio>
          <el-radio :value="3">申请失败</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="商户编号" prop="tenantNum" v-if="tableItem.status==2">
        <el-input
          v-model="tableItem.tenantNum"
          :controls="false"
          :precision="0"
          placeholder="请输入商户编号"
        />
      </el-form-item>

    </el-form>
    <template #footer v-if="isDisabled">
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="updateData"
        >确 定</el-button>
      </span>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { examineMerchant } from '@/api/settle'
import { validate } from '@/utils/validate'

const isDisabled = ref(true)

const tableItem = reactive({
  status: null,
  tenantNum: null,
})

const rules = reactive({
  status: [{ required: true, message: '请选择申请结果', trigger: 'change' }],
  tenantNum: [{ required: true, message: '请输入商户编号', trigger: 'blur' }],
})

const dialogVisible = ref(false)
const dialogStatus = ref('edit')

const reset = () => {
  if (!articleFormRef) return
  articleFormRef.value.resetFields()
  // isDisabled.value = false
}

const articleFormRef = ref(null)

const emit = defineEmits(['listChange'])

const updateData = async () => {
  const valid = await validate(articleFormRef)
  if (valid) {
    examineMerchant(tableItem)
    .then(() => {
      // TODO use res data
      emit('listChange')
      dialogVisible.value = false
      ElMessage.success('更新成功！')
    })
    .catch(() => {
      dialogVisible.value = false
      ElMessage.error('更新失败！')
    })
  }
}

defineExpose({ dialogVisible, isDisabled, tableItem, dialogStatus, reset })

</script>
<style lang="scss" scoped>
</style>
